<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import HeaderNav from './HeaderNav.vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: String,
  logoSrc: String,
  backgroundColor: String,
  textColor: String,
  height: [String, Number],
  navItems: {
    type: Array,
    default: () => []
  },
  isSticky: Boolean,
  breakpoint: {
    type: [String, Number],
    default: 768
  }
})

const emit = defineEmits(['logoClick', 'navClick'])

const isMobile = ref(false)
const isMenuOpen = ref(false)

const headerStyles = computed(() => ({
  backgroundColor: props.backgroundColor || 'transparent',
  color: props.textColor || 'inherit',
  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
  position: props.isSticky ? 'sticky' : 'static'
}))

const normalizedBreakpoint = computed(() => {
  const bp = props.breakpoint
  return typeof bp === 'string' ? parseInt(bp) : bp
})

const checkViewport = () => {
  const width = window.innerWidth
  isMobile.value = width < normalizedBreakpoint.value
  if (!isMobile.value) isMenuOpen.value = false
}

const handleLogoClick = (event) => {
  emit('logoClick', event)
}

const handleNavClick = (payload) => {
  emit('navClick', payload)
  if (isMobile.value) isMenuOpen.value = false
}

onMounted(() => {
  checkViewport()
  window.addEventListener('resize', checkViewport)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkViewport)
})

watch(() => props.breakpoint, checkViewport)
</script>

<template>
  <header
      class="header"
      :style="headerStyles"
      :class="{ 'sticky-header': isSticky }"
  >
    <div class="header-content">
      <div class="brand-section">
        <img
            v-if="logoSrc"
            :src="logoSrc"
            alt="Site Logo"
            class="logo"
            @click="handleLogoClick"
            @keydown.enter="handleLogoClick"
            tabindex="0"
            role="button"
        />
        <div class="title-section">
          <h1 class="title">{{ title }}</h1>
          <h2 v-if="subtitle" class="subtitle">{{ subtitle }}</h2>
        </div>
      </div>

      <HeaderNav
          v-if="!isMobile"
          :items="navItems"
          @navClick="handleNavClick"
          class="desktop-nav"
      />

      <button
          v-if="isMobile"
          class="hamburger"
          @click="isMenuOpen = !isMenuOpen"
          aria-label="Toggle navigation menu"
      >
        <div class="hamburger-box">
          <div class="hamburger-inner" :class="{ active: isMenuOpen }"></div>
        </div>
      </button>
    </div>

    <Transition name="slide-down">
      <div
          v-if="isMobile && isMenuOpen"
          class="mobile-nav-container"
      >
        <HeaderNav
            :items="navItems"
            @navClick="handleNavClick"
            class="mobile-nav"
        />
      </div>
    </Transition>
  </header>
</template>

<style scoped>
.header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sticky-header {
  position: sticky;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 100%;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  height: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.title-section {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 0;
  font-size: 1.5rem;
}

.subtitle {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.hamburger {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.hamburger-box {
  width: 30px;
  height: 24px;
  position: relative;
}

.hamburger-inner {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: all 0.3s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: all 0.3s ease;
}

.hamburger-inner::before {
  top: -8px;
}

.hamburger-inner::after {
  top: 8px;
}

.hamburger-inner.active {
  background-color: transparent;
}

.hamburger-inner.active::before {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-inner.active::after {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav-container {
  background-color: inherit;
  padding: 1rem;
}

.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}

.slide-down-enter-from,
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
}

@media (max-width: 768px) {
  .header-content {
    padding: 0 1rem;
  }

  .title {
    font-size: 1.2rem;
  }
}
</style>